<template>
  <div>
<!--    <el-button @click="aClick">{{ $i18n.locale }}</el-button>-->
    <select v-model="$i18n.locale">
      <option v-for="(lang) in langs" :key="lang" :value="lang">
        {{ lang }}
      </option>
    </select>

    <div>
      文字本地化：
      {{ $t('common.username') }}
      {{ $t('common.save') }}
    </div>

    <div>
      数字本地化： {{ $n(100, 'currency') }}
    </div>
<!--    <div>-->
<!--      <p>{{ $t('greeting',{num:123}) }}</p>-->
<!--    </div>-->

    <p>{{ $t('hello') }}</p>
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: 'I18nTest',
  components: {HelloWorld},
  data() {
    return {
      common: this.$t('common')
    };
  },
  computed:{
    langs() {
      return Object.keys(this.$i18n.messages)
    }
  },
  mounted() {
  },
  methods: {
    aClick() {
      let language = this.$i18n.locale === 'en' ? 'zh' : 'en';
      localStorage.setItem("language", language)
      this.$i18n.locale = language
    }
  }
};
</script>

<style scoped>
</style>

